/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
  <view class="page">
    <view class="tab">
      <view class="tabItem" v-for="(item,index) in tab" :key="index" :class="{active:active==index}" @click="changeTab(index)">
        <view class="title">{{item}}</view>
        <view class="underLine" :class="{active:active==index}"></view>
      </view>
    </view>
    <view class="content">
      <!-- 未使用 -->
      <view class="list" v-if="active==0">
        <view class="listItem" v-for="(item, index) in list" :key="index">
          <image :src="imgStaticUrl + '/images/coupon1.png'" class="coupon"></image>
          <view class="box">
            <view class="price">
              <view class="icon">¥</view>
              <view class="volum">{{ item.dec_price }}</view>
            </view>
            <view class="descripe">
              <view class="text">满￥{{ item.man_price }}减{{ item.dec_price }}</view>
              <view class="expire">{{ item.start_time }}-{{ item.end_time }}</view>
            </view>
            <view class="state" @click="navPerson(item.shop_id,item.shop_name,item.logo)">
              <view class="text">立即使用</view>
            </view>
          </view>
        </view>
      
      </view>
      <!-- 已使用 -->
      <view class="list" v-if="active==1">
        <view class="listItem" v-for="(item, index) in list" :key="index">
          <image :src="imgStaticUrl + '/images/coupon2.png'" class="coupon"></image>
          <view class="box">
            <view class="price">
              <view class="icon">¥</view>
              <view class="volum">{{ item.dec_price }}</view>
            </view>
            <view class="descripe">
              <view class="text">满￥{{ item.man_price }}减{{ item.dec_price }}</view>
              <view class="expire">{{ item.start_time }}-{{ item.end_time }}</view>
            </view>
            <view class="state">
              <image :src="imgStaticUrl+'images/coupon_status1.png'" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 已过期 -->
      <view class="list" v-if="active==2">
        <view class="listItem" v-for="(item, index) in list" :key="index">
          <image :src="imgStaticUrl + '/images/coupon2.png'" class="coupon"></image>
          <view class="box">
            <view class="price">
              <view class="icon">¥</view>
              <view class="volum">{{ item.dec_price }}</view>
            </view>
            <view class="descripe">
              <view class="text">满￥{{ item.man_price }}减{{ item.dec_price }}</view>
              <view class="expire">{{ item.start_time }}-{{ item.end_time }}</view>
            </view>
            <view class="state">
              <image :src="imgStaticUrl+'images/counon_status2.png'" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <div class="no-more" v-if="!isHas">没有更多</div>
    </view>
  </view>
</template>

<script>
	import {  
	        mapState,  
	        mapMutations  
	    } from 'vuex'; 
export default {
  data() {
    return {
      imgStaticUrl: this.STATICURL,
      tab: ['未使用', '已使用', '已过期'],
      active: 0, //当前选中项
      list: [],
      isHas: true,
      pageShow: false
    }
  },
  
  onLoad() {
    this.getcouponlstshop()
  },
   computed: {  
              ...mapState(['login'])  
          },
  // 切换
  methods: {
	navPerson(id,name,tou){
		console.log(name,"namemems")
		var tou = JSON.stringify(tou)
		uni.navigateTo({
			url:`/pagesC/home/showcase/showcase?id=${id}&name=${name}&tou=${tou}`
		})
	},
    changeTab(index) {
      this.list = []
      this.active = index;
      this.isHas = false
      this.$nextTick(() => {
        this.getcouponlstshop()
      })
    },
    
    getcouponlstshop() {
      if (this.isMore) return
      
      this.$loading()
      
      this.$http.getcouponlstshop({
        filter: this.active + 1
      }).then(res => {
        if (res.status === 200) {
          if (res.data.length) {
            this.list = res.data[0]
            this.isHas = res.data[0].length
          } else {
            this.isHas = false
          }
        } else {
          this.$toast(res.mess)
        }
      })
    }
  },
  
  onReachBottom() {
    this.getStockDetailList()
  }
}
</script>

<style lang="less">
.page {
  .tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 88upx;
    background: #fff;
    z-index: 2;
    border-bottom: 1upx solid #fbfbfb;
    
    .tabItem {
      font-size: 28upx;
      line-height: 48upx;
      color: #999;
      font-weight: 400;
      
      &.active {
        color: #FA3E3F;
        font-weight: 600;
      }
    }
  }
  
  .content {
    padding-top: 88upx;
    
    .list {
      .listItem {
        padding: 32upx;
        background: #fff;
        position: relative;
        border-bottom: 1upx solid #fbfbfb;
        
        &:last-child {
          border-bottom: none;
        }
        
        .coupon {
          width: 100%;
          height: 188upx;
        }
        
        .box {
          color: #fff;
          position: absolute;
          left: 32upx;
          top: 32upx;
          right: 32upx;
          bottom: 32upx;
          padding: 42upx 43upx 42upx 31upx;
          display: flex;
          align-items: center;
          
          .price {
            display: flex;
            
            .icon {
              font-size: 36upx;
              line-height: 64upx;
            }
            
            .volum {
              font-size: 90upx;
              line-height: 105upx;
            }
          }
          
          .descripe {
            margin-left: 22upx;
            
            .text {
              font-size: 24upx;
              line-height: 33upx;
            }
            
            .expire {
              font-size: 18upx;
              line-height: 25upx;
              margin-top: 23upx;
              
            }
          }
          
          .state {
            flex: 1;
            font-size: 24upx;
            display: flex;
            justify-content: flex-end;
            
            image {
              width: 121upx;
              height: 121upx;
            }
          }
        }
      }
      
    }
  }
}
</style>
